<!--  -->
<template>
  <div class="mat-img-main">
    <!-- 搜索部分 -->
    <el-card>
      <div slot="header">
        <span>图片搜索</span>
      </div>
      <el-row>
        <el-col :gutter="20" :span="8">
          <el-input v-model="search.name" placeholder="要搜索的图片名"></el-input>
        </el-col>
        <el-col :span="6" :offset="6" style="text-align: right;">
          <el-button type="danger" size="small" @click="doReset">重置</el-button>
          <el-button type="primary" size="small" @click="doSearch">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 第一次上传照片 -->

    <!-- <form :action="host+'/admin/xy/upload/uploadImg'" method="post" enctype="multipart/form-data">
      <input type="file" name="file" />
      <input type="submit" value="提交" />
    </form>-->

    <!-- ajax异步上传 -->
    <!-- <input type="file" @change="doAjaxUpdate($event)" />
    <img :src="img" alt @dblclick="delImg" />-->

    <!-- 饿了么组件上传 -->
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="host+'/admin/xy/upload/uploadImg'"
      :file-list="fileList"
      :headers="headers"
      :on-success="handleUploadSucc"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <el-row :gutter="30">
      <el-col :span="6" v-for="m in imgList" :key="m.id">
        <el-card style="margin-top:20px;" shadow="hover">
          <el-image
            @click="showBig(host+'/'+m.dir+'/'+m.fileName)"
            style="width: 200px; height: 150px"
            :src="host+'/'+m.dir+'/'+m.fileName"
            fit="fill"
          ></el-image>
          <div style="display:flex; justify-content:space-around;">
            <el-tooltip class="item" effect="dark" content="点击修改" placement="top">
              <span
                v-if="m.title"
                :v-model="m.title"
                @click="open(m.id,m.title)"
                style="margin-top:14px;"
              >{{m.title}}</span>

              <el-button v-else type="text" @click="open(m.id)">未命名</el-button>
            </el-tooltip>
            <el-button
              style="color:red;margin-top:3px;"
              class="el-icon-delete"
              type="text"
              @click="doDele(m.id)"
            >删除</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      style="margin-top: 30px;text-align:right;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.start"
      :page-sizes="page.sizes"
      :page-size="page.limit"
      :total="page.totalCount"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
const settingFile = require("@/settings.js");
import axios from "axios";
import { getToken } from "@/utils/myAuth";
import { getImgList, dele, edit } from "@/api/material/imgs";
export default {
  name: "imgs",
  data() {
    return {
      host: settingFile.host,
      img: "",
      fileList: [],
      imgList: [],
      search: {},
      name: "",
      page: {
        start: 1,
        limit: 12,
        totalCount: 0,
        sizes: [12, 24, 36], // 注意: element 的sizes必须是limit的整倍数
      },
    };
  },
  computed: {
    headers() {
      return {
        "bufan-token": getToken(),
      };
    },
  },
  created() {
    this.getImgList();
  },

  mounted() {},
  methods: {
    doSearch() {},
    doReset() {},
    open(e, f) {
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: f,
      })
        .then(({ value }) => {
          this.name = value;
          this.doEdit(e);

          this.name = "";
          this.$message({
            type: "success",
            message: "名称: “" + value + "”修改成功",
          });
          this.getImgList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    doAjaxUpdate(e) {
      var file = e.target.files[0];
      var fd = new FormData();
      fd.append("file", file);
      var url = `${this.host}/admin/xy/upload/uploadImg`;
      axios.post(url, fd).then((res) => {
        this.img = this.host + "/" + res.data.url;
        console.log(res);
        if (res.code == "success") {
          this.$message({
            type: "success",
            message: "上传成功!",
          });
          this.getImgList();
        }
      });
    },
    handleUploadSucc(response, file, fileList) {
      this.img = this.host + "/" + response.url;
      // 成功后清除文件进度条
      this.$refs.upload.clearFiles();
      this.$message({
        type: "success",
        message: "上传成功!",
      });
      this.getImgList();
    },
    doEdit(e) {
      edit({ id: e, title: this.name }).then((res) => {
        console.log(res);
      });
    },
    doDele(e) {
      dele({ id: e }).then(() => {
        this.getImgList();
      });
    },
    //   this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       dele({ id: e }).then(() => {
    //         this.$message({
    //           type: "success",
    //           message: "删除成功!",
    //         });
    //         this.getImgList();
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.getImgList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      this.getImgList();
    },
    getImgList() {
      getImgList({
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      }).then((res) => {
        this.imgList = res.data.list;
        this.page.totalCount = res.data.totalRow;
      });
    },
  },
};
</script>

<style lang='scss' scoped >
</style>
